<!--
 * @Author: hecl 1301897425@qq.com
 * @Date: 2022-01-27 17:19:47
 * @LastEditors: hecl 1301897425@qq.com
 * @LastEditTime: 2022-06-10 13:27:19
 * @FilePath: \wangluolizheng\src\views\governance\service\service-edit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="serviceEditBox">
    <section>
      <div class="titleBox"><i class="el-icon-s-order"></i>新增工单</div>
      <div class="content">
        <el-radio-group v-model="formData.sourceId" class="margin-b-30">
          <el-radio
            v-for="(item, index) in sourceList"
            :key="index"
            :label="item.lyid"
            >{{ item.lymc }}</el-radio
          >
        </el-radio-group>
        <div class="edit-top flex-row">
          <div class="uploadFileTitle">工单文件</div>
          <div class="edit-top-type edit-top-docu">
            <div class="edit-type-docu">
              <el-upload
                class="upload-demo"
                drag
                :action="uploadPath"
                :file-list="fileDataList"
                multiple
                :limit="limitNumer"
                :on-preview="filePreview"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="edit-top-type edit-top-txt">
            <div class="inputBox">
              <el-input
                type="textarea"
                resize="none"
                v-model="pastePojo.pasteValue"
                placeholder="粘贴内容在这里..."
              ></el-input>
            </div>
          </div>
        </div>
        <div class="paste-btn-div margin-t-20">
          <el-button type="default" size="small" @click="backFn()"
            >返回</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="pasteFn()"
            :loading="loadingPaste"
            >一键解析</el-button
          >
        </div>
      </div>
    </section>
    <section>
      <div class="titleBox"><i class="el-icon-s-order"></i>解析工单内容</div>
      <el-form
        ref="form"
        :model="formData"
        :rules="formDataRules"
        label-width="100px"
      >
        <section class="content">
          <el-row>
            <div
              v-for="(item, index) in formData.gdInfoEntityList"
              :key="index"
            >
              <el-col :span="12">
                <el-form-item
                  label="工单编号："
                  :prop="'gdInfoEntityList.' + index + '.code'"
                  :rules="{
                    required: true,
                    message: '请输入工单编号',
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="来电人："
                  :prop="'gdInfoEntityList.' + index + '.income'"
                  :rules="{
                    required: true,
                    message: '请输入来电人姓名',
                    trigger: 'blur'
                  }"
                >
                  <el-input v-model="item.income"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <el-row
            v-for="(item, index) in formData.gdInfoEntityList"
            :key="index"
          >
            <el-col :span="12">
              <el-form-item
                label="联系电话："
                :prop="'gdInfoEntityList.' + index + '.telphone'"
                :rules="{
                  required: true,
                  message: '请输入联系电话',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="item.telphone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱：">
                <el-input v-model="item.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工单主题：" prop="title">
                <el-input v-model="formData.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工单来源：">
                <el-radio-group v-model="formData.gdInfoEntityList[0].szxx_type_sub">
                  <el-radio label="市长">市长</el-radio>
                  <el-radio label="书记">书记</el-radio>
                  <el-radio label="成都发布">成都发布</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="工单内容：" prop="content">
              <el-input type="textarea" v-model="formData.content"></el-input>
            </el-form-item>
          </el-row>
        </section>
        <div class="titleBox" style="padding-top: 0px;">
          <i class="el-icon-s-order"></i>处理信息
        </div>
        <section class="content">
          <el-row>
            <el-col :span="5">
              <el-form-item label="是否紧急：">
                <el-radio-group v-model="formData.isImportant">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="是否疫情：">
                <el-radio-group v-model="formData.situation">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处理时限：" prop="limitTime">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="formData.limitTime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="执行处室：" prop="deptListNew">
              <el-checkbox-group
                v-model="formData.deptListNew"
                @change="deptChange"
              >
                <el-checkbox
                  v-for="item in deptCheckBoxList"
                  :key="item.bmid"
                  :label="item.bmid"
                  :value="item.bmid"
                  name="deptList"
                  >{{ item.bmjc }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="工单类别：" prop="cate">
              <el-radio-group v-model="formData.cate">
                <el-radio
                  v-for="(item, index) in cateGroupList"
                  :key="index"
                  :label="item.catid"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="formData.remark"></el-input>
            </el-form-item>
          </el-row>
        </section>
        <el-row>
          <el-col :span="6" :offset="9">
            <el-form-item>
              <el-button type="info">返回</el-button>
              <el-button
                type="primary"
                v-loading.fullscreen.lock="fullscreenLoading"
                element-loading-text="工单下发中..."
                @click="submit('form')"
                >下发</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      sourceList: [],
      // 粘贴内容
      pastePojo: {
        pasteValue: ''
      },
      // 文件上传地址
      limitNumer: 1,
      uploadPath: this.$api.common.uploadFile,
      fileDataList: [], // 工单文件
      filePojo: {
        fileName: '',
        filePath: ''
      },
      loadingPaste: false,
      // 表单数据
      formData: {
        sourceId: '', // 系统来源id
        sourceName: '', // 系统来源名称
        isImportant: false, // 是否紧急件
        situation: false, // 是否疫情
        limitTime: '', // 处理时限
        title: '', // 工单主题
        content: '', // 工单内容
        remark: '', // 备注
        cate: '', // 工单类别
        deptListNew: [], // 执行处室id
        gdInfoEntityList: [
          {
            // 工单信息
            code: '', // 编号
            income: '', // 来电人
            telphone: '', // 电话
            email: '', // 联系邮箱
            source: null,
            title: '',
            content: '',
            szxx_type_sub: ''
          }
        ],
        fileEntity: {
          fileName: '',
          filePath: '',
          fileType: ''
        } // 工单文件
      },
      formDataRules: {
        title: [{ required: true, message: '请输入工单主题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入工单内容', trigger: 'blur' }
        ],

        limitTime: [
          {
            required: true,
            message: '请选择处理时限',
            trigger: ['blur', 'change']
          }
        ],
        deptListNew: [
          {
            required: true,
            message: '请选择执行处室',
            trigger: ['blur', 'change']
          }
        ],
        cate: [
          {
            required: true,
            message: '请选择工单类别',
            trigger: ['blur', 'change']
          }
        ]
      },
      deptCheckBoxList: [],
      cateGroupList: [],
      fullscreenLoading: false,
      fileFj: []
    }
  },
  created () {
    this.getSourceList()
    this.getDeptCheckBoxList()
    this.getCateGroupList()
  },
  methods: {
    // 获取来源列表
    getSourceList () {
      console.log('系统来源')
      this.$axios.post(this.$api.source.selector).then(rs => {
        if (rs) {
          this.sourceList = rs
          this.formData.sourceId = rs[0].lyid
          this.formData.sourceName = rs[0].lymc
        }
      })
    },
    // 处室选择check-box
    getDeptCheckBoxList () {
      this.$axios.post(this.$api.dept.selector).then(rs => {
        if (rs) {
          this.deptCheckBoxList = rs
        }
      })
    },
    // 工单类别
    getCateGroupList () {
      this.$axios.post(this.$api.cate.work).then(rs => {
        if (rs) {
          console.log(rs);
          this.cateGroupList = rs
          this.formData.cate = rs[0].catid
        }
      })
    },
    // 工单文件上传成功
    handleSuccess (res, file, fileList) {
      if (res.code === 0) {
        this.fileDataList = []
        let result = res.data
        let fileInfo = {}
        fileInfo.name = result.fileName
        fileInfo.url = result.filePath
        fileInfo.type = result.fileType
        fileInfo.filePreview = result.filePreview
        this.fileDataList.push(fileInfo)

        this.formData.fileEntity.fileName = result.fileName
        this.formData.fileEntity.filePath = result.filePath
        this.formData.fileEntity.fileType = result.fileType

        // 清除粘贴内容
        this.pastePojo.pasteValue = ''
      } else {
        this.$message.error('哎呀!文件上传失败请重试...')
      }
    },
    // 上传数量限制
    handleExceed () {
      this.$message.error('一次只能上传一个文件，别再点了...')
    },
    // 文件预览
    filePreview (file) {
      this.$previewFile(file.url)
    },
    // 返回
    backFn () {
      this.$router.push('/service')
    },
    // 一键粘贴解析内容
    pasteFn: function () {
      if (this.pastePojo.pasteValue === '' || this.pastePojo.pasteValue === 0) {
        if (this.fileDataList.length === 0) {
          this.$message({
            message: '请先粘贴内容或上传文件...',
            showClose: true,
            type: 'warning'
          })
        } else {
          // console.log("解析文件");
          this.pasteFileFn()
        }
      } else {
        // console.log("解析文字");
        this.pasteTxtFn()
      }
    },
    // 解析文件
    pasteFileFn: function () {
      console.log('解析文件')
      const _this = this
      // 梳理数据
      _this.loadingSave = false
      // 文件数据对象
      let fileInfo = _this.fileDataList[0]
      _this.filePojo.fileName = fileInfo.name
      _this.filePojo.filePath = fileInfo.url
      _this.filePojo.fileType = fileInfo.type
      // 请求，解析内容
      _this.loadingPaste = true
      this.$axios.post(_this.$api.service.document, _this.filePojo).then(rs => {
        if (rs) {
          _this.loadingPaste = false
          _this.showClxxDiv = true
          _this.formData = Object.assign(_this.formData, rs)
        } else {
          console.log('解析失败')
          _this.loadingPaste = false
        }
      })
    },
    // 解析文字
    pasteTxtFn: function () {
      const _this = this
      // 梳理数据
      _this.loadingSave = false
      // 请求，解析内容
      _this.loadingPaste = true
      this.$axios.post(_this.$api.service.value, _this.pastePojo).then(rs => {
        if (rs) {
          _this.loadingPaste = false
          _this.showClxxDiv = true
          _this.formData = Object.assign(_this.formData, rs)
        } else {
          _this.loadingPaste = false
        }
      })
    },
    // 解析后的附件提取
    handleContent (content) {
      if (!content) {
        return [content, []]
      }
      let reg = /\[资源([^\[\]]+)资源\]/g
      let resources = []
      let resultContent = content.replace(reg, (v, i, a, r) => {
        resources.push(i)
        return ''
      })
      let set = new Set(resources)
      resources = resources.filter(v => {
        if (/_m(\.(jpg|bmp|png))$/i.test(v)) {
          return !set.has(v.replace(/_m(\.(jpg|bmp|png|webp))$/i, '$1'))
        }
        return true
      })
      return [resultContent, resources]
    },
    deptChange (val) {
      console.log('val', val)
    },
    // 工单附件上传
    fjUploadSuccess (res) {
      if (res.code === 0) {
        this.fileDataList = []
        let result = res.data
        let fileInfo = {}
        fileInfo.fileName = result.fileName
        fileInfo.filePath = result.filePath
        fileInfo.fileType = result.fileType
        fileInfo.filePreview = result.filePreview
        this.fileFj.push(fileInfo)
      } else {
        this.$message.error('哎呀!文件上传失败请重试...')
      }
    },
    // 下发工单
    submit (formName) {
      const _this = this
      _this.fullscreenLoading = true
      this.$refs[formName].validate(valid => {
        if (this.formData.gdInfoEntityList[0].title == '') {
          this.formData.gdInfoEntityList[0].title = this.formData.title
          this.formData.gdInfoEntityList[0].content = this.formData.content
        }
        this.sourceList.map(item => {
          if (item.lyid == this.formData.sourceId) {
            this.formData.sourceName = item.lymc
          }
        })
        if (valid) {
          _this.$axios
            .post(_this.$api.service.issue, _this.formData)
            .then(rs => {
              _this.fullscreenLoading = false
              if (rs) {
                _this.loadingSave = false
                _this.$message({
                  message: '已成功下发...',
                  showClose: true,
                  type: 'success'
                })
                _this.$router.push('/service')
              }
            })
        } else {
          _this.fullscreenLoading = false
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.serviceEditBox {
  padding-left: 20px;
  font-size: 14px;
  padding-bottom: 100px;
  .titleBox {
    border-bottom: 1px solid #eee;
    font-size: 16px;
    padding: 30px 0px 10px;
    color: #666666;
    .el-icon-s-order {
      color: #409eff;
      margin-right: 10px;
      font-size: 20px;
    }
  }
  .content {
    padding: 20px 100px;
    .edit-top {
      align-items: start;
      color: #303133;
      .uploadFileTitle {
        width: 100px;
      }
      .edit-type-docu {
        width: 400px;
      }
      .edit-top-txt {
        width: calc(100% - 500px);
      }
    }
    .paste-btn-div {
      text-align: right !important;
    }
    .el-row {
      margin-bottom: 26px;
    }
  }
}
</style>
<style lang="scss">
.serviceEditBox {
  .el-textarea__inner {
    height: 180px !important;
  }
}
</style>
